<template>
  <el-row :gutter="40">
    <el-col v-if="!form.uuid">
      <el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
    </el-col>
    <template v-else>
      <el-col :lg="24">
        <h2>{{ form.meta.title || "新增菜单" }}</h2>
        <el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
          <el-form-item label="显示名称" prop="meta.title">
            <el-input v-model="form.meta.title" clearable placeholder="菜单显示名字"></el-input>
          </el-form-item>
          <el-form-item label="上级菜单" prop="menuParentId">
            <el-cascader v-model="form.menuParentId" :options="menuOptions" :props="menuProps" :show-all-levels="false"
                         placeholder="顶级菜单" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="类型" prop="meta.type">
            <el-radio-group v-model="form.meta.type">
              <el-radio-button label="menu">菜单</el-radio-button>
              <el-radio-button label="iframe">Iframe</el-radio-button>
              <el-radio-button label="link">外链</el-radio-button>
              <el-radio-button label="button">按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="menuSort">
            <el-input-number v-model="form.menuSort" :min="0" :max="9999"></el-input-number>
          </el-form-item>
          <el-form-item label="按钮标识" prop="name" v-if="form.meta.type === 'button'">
            <el-input v-model="form.name" clearable placeholder="菜单别名"></el-input>
            <div class="el-form-item-msg">
              系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏
            </div>
          </el-form-item>
          <el-form-item label="别名" prop="name" v-if="form.meta.type !== 'button'">
            <el-input v-model="form.name" clearable placeholder="菜单别名"></el-input>
            <div class="el-form-item-msg">
              系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏
            </div>
          </el-form-item>
          <el-form-item label="菜单图标" prop="meta.icon" v-if="form.meta.type !== 'button'">
            <Sailor-icon-select v-model="form.meta.icon" clearable></Sailor-icon-select>
          </el-form-item>
          <el-form-item label="路由地址" prop="path" v-if="form.meta.type !== 'button'">
            <el-input v-model="form.path" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="重定向" prop="redirect" v-if="form.meta.type !== 'button'">
            <el-input v-model="form.redirect" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="菜单高亮" prop="active" v-if="form.meta.type !== 'button'">
            <el-input v-model="form.active" clearable placeholder=""></el-input>
            <div class="el-form-item-msg">子节点或详情页需要高亮的上级菜单路由地址</div>
          </el-form-item>
          <el-form-item label="视图" prop="component" v-if="form.meta.type !== 'button'">
            <el-input v-model="form.component" clearable placeholder="">
              <template #prepend>views/</template>
            </el-input>
            <div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>
          </el-form-item>
          <el-form-item label="是否隐藏" prop="meta.hidden" v-if="form.meta.type !== 'button'">
            <el-checkbox v-model="form.meta.hidden">隐藏菜单</el-checkbox>
            <div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
          </el-form-item>
          <el-form-item label="整页路由" prop="fullpage" v-if="form.meta.type !== 'button'">
            <el-switch v-model="form.meta.fullpage"/>
          </el-form-item>
          <el-form-item label="是否固定" prop="meta.affix" v-if="form.meta.type !== 'button'">
            <el-switch v-model="form.meta.affix"/>
          </el-form-item>
          <el-form-item label="是否缓存" prop="meta.keepAlive" v-if="form.meta.type !== 'button'">
            <el-switch v-model="form.meta.keepAlive"/>
            <div class="el-form-item-msg">缓存页面，下次打开页面会自动加载上次的页面状态</div>
          </el-form-item>
          <el-form-item label="标签" prop="tag" v-if="form.meta.type !== 'button'">
            <el-input v-model="form.meta.tag" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save" :loading="loading">保 存</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </template>
  </el-row>

</template>

<script setup>
import SailorIconSelect from '@/components/SailorIconSelect'

import Apis from '@/api'
import {reactive, ref, watch} from "vue";
import {ElMessage} from "element-plus";

const emit = defineEmits(['success'])

const props = defineProps({
  menu: {
    type: Object, default: () => {
    }
  },
})

let form = reactive({
  uuid: '',
  menuParentId: '',
  menuSort: 0,
  path: '',
  name: '',
  redirect: '',
  component: '',
  meta: {
    icon: '',
    title: '',
    active: '',
    type: '',
    hidden: false,
    fullpage: false,
    affix: false,
    keepAlive: false,
    tag: ''
  }
})
let menuOptions = reactive([])
let menuProps = reactive({
  value: 'uuid',
  label: 'title',
  checkStrictly: true
})
let rules = reactive([])
let loading = ref(false)

watch(() => props.menu, (val) => {
  menuOptions = treeToMap(props.menu)
}, {deep: true})


//简单化菜单
const treeToMap = (tree) => {
  const map = []
  tree.forEach(item => {
    let obj = {
      uuid: item.uuid,
      menuParentId: item.menuParentId,
      title: item.meta.title,
      children: item.children && item.children.length > 0 ? treeToMap(item.children) : null
    };
    map.push(obj)
  })
  return map
}
//保存
const save = async () => {
  loading.value = true
  let res = await Apis.api_setting.menu.update.post(form);
  loading.value = false
  if (res.code === 0) {
    emit('success', form)
    ElMessage.success("保存成功")
  } else {
    ElMessage.warning(res.message)
  }
}
//表单注入数据
const setData = (data, pid) => {
  Object.assign(form, data)
}

defineExpose({
  setData
})

</script>

<style scoped>
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
  color: #fff;
}

[data-theme="dark"] .apilist {
  border-color: #434343;
}
</style>
